<template>
	<view class="form-gather-page">
		<view class="top_nav">
			<view :class="topNavActiveIndex==index?'top_nav_active':''" v-for="(item,index) in topNavList" :key='index' @click="topNavCk(index)">
				{{ item }}
			</view>
		</view>
		<view class="" v-if="actList.length!=0">
			<scroll-view 
				scroll-y="true" 
				scroll-with-animation 
				:style="'height:'+height+'px'" 
				@scrolltolower="LoadingMore"
			>
				<view class="act-content" v-for="(item,index) in actList" :key='index'>
					<view class="act-content-detail">
						<image :src="item.cover_image"></image>
						<view class="underway" v-if="item.status == 1">进行中</view>
						<view class="finished" v-if="item.status == 2">已结束</view>
						<view class="unbegin" v-if="item.status == 0">未发布</view>
					</view>
					<view class="act-title-details">
						{{item.title | goodName}}
					</view>
					
					<view class="act-title-content">
						<view class="act-title-detail" v-if="item.customer != null">
							<text>创建者：</text>
							<image :src="item.customer.avatar" mode=""></image>
							<text class="act-name">{{item.customer.nickname}}</text>
						</view>
						<!-- #ifdef MP-WEIXIN -->
							<button class="share-patriarch" style="padding: 0;" type="default" open-type="share" :id="index">分享给家长</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
							<view class="share-patriarch" @click="getStore(item)">
								分享给家长
							</view>
						<!-- #endif -->
						
					</view>
					
					<view class="act-operate" v-if="item.status == 1">
						<view class="" v-for="(operate,num) in underwayList" :key='num' @click="operateClick(num,item)">
							{{operate}}
						</view>
					</view>
					
					<view class="act-operate" v-if='item.status == 0 || item.status == 2'>
						<view style="width: 48%;" v-for="(operate,num) in unpublishedList" :key='num' @click="unpublishedClick(num,item)">
							{{operate}}
						</view>
					</view>
					<view class="order-detail" v-if='item.status != 0' @click="checkMsg(item)">
						订单详情
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="no-form" v-else>暂无表单！请添加</view>
		<view class="add-form" v-if="role == 3 || role == 2">
			<view class="" @click="addForm">
				新建新表单
			</view>
		</view>
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de">
				<image class="popup_box_close" :src="imglink + 'share_tip.png'"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//#ifdef H5
	import wx from '@/common/wx-js-sdk.js'
	//#endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		components:{uniPopup},
		filters: {
			goodName(value) {
				if (!value) return ''
				if (value.length > 15) {
					return value.slice(0, 15) + '...'
				}
				return value
			}
		},
		data(){
			return{
				imglink: this.$store.state.imgLink,
				topNavList: ['全部','进行中','未发布','已结束'],
				topNavActiveIndex:0,
				underwayList:['编辑表单','邀请员工','结束收集'],
				unpublishedList:['编辑表单','邀请员工'],
				pageSize:8,
				actList:[],
				lastPage:'',
				height:0,
				page:1,
				status:'',
				store_id:'',
				customer_info:{},
				store_info: null,
				role:"" ,//角色：1员工,  2队长
				store:{
					title:'',
					store_collect_info_id:'',
					cover_image:'',
				},
			}
		},
		onLoad(options) {
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			if(!store_id > 0){
				store_id = uni.getStorageSync('store_id')?parseInt(uni.getStorageSync('store_id'),10):0
			}else{
				uni.setStorageSync('store_id', store_id)
			}
			
			this.store_id = parseInt(store_id,10)
			this.$store.commit('updateStoreId',store_id)
			this.height = parseInt(uni.getSystemInfoSync().windowHeight) - this.height
			
		},
		onShareAppMessage(res) {
			let _self = this
			_self.actList.forEach((item) => {
				if( item.store_collect_info_id == _self.actList[res.target.id].store_collect_info_id ){
					_self.store.title = item.title
					_self.store.store_collect_info_id = item.store_collect_info_id
					_self.store.cover_image = item.cover_image
				}
			})
			console.log(_self.store,'分享的数据')
			return {
				title: _self.customer_info.nickname + '邀请您加入' + _self.store.title + '活动', // 分享描述
				path: '/pages/memberCenter/formGatherManage/msgLogin/msgLogin?store_id=' + _self.$store.getters.getStoreId + 
					'&customer_id=' + _self.customer_info.customer_id + 
					'&actId=' + _self.store.store_collect_info_id, //'&token=' + _self.$store.getters.getToken +
				imageUrl: _self.store.cover_image, // 分享图标
			}
		},
		onShow() {
			// this.getCustomer()
			this.getCustomer()
		},
		methods:{
			setStore(item){
				const _self = this
				
			},
			getStore(item){
				const _self = this
				
				const data = {
					token:this.$store.getters.getToken,
					customer_store_id:this.store_id
				}
				
				this.$api.getCustomerInfo(data).then(res => {
					
					if(!res.status){
						return false
					}
					// console.log(res.data,'store res.data')
					// return false
					
					const store_info = res.data.userinfo
					// 进行签名的时候  Android 不用使用之前的链接， ios 需要
					let signLink = /(Android)/i.test(navigator.userAgent) ? location.href : window.entryUrl;
					let data = {
						token:_self.$store.getters.getToken,
						url:signLink
					}
					
					this.$api.gain_share_data(data).then( res => {
						const shareConfig = JSON.parse(res.data)
						
						console.log(shareConfig,'share res.data')
						this.$refs.shareTip.open()
						wx.config(shareConfig)
						wx.ready(function(){
							
							wx.checkJsApi({
								jsApiList: [
									'updateTimelineShareData',
									'updateAppMessageShareData',
									'onMenuShareAppMessage',
									'onMenuShareTimeline'
								],
								success: function(res) {
									console.log('接口检测成功:'+res);
								},
								error: function(err) {
									console.log('接口检测失败:'+err);
								}
							})
							
							const shareData = { 
								title: item.title, // 分享标题
								desc:  store_info.nickname + '邀请您加入' + item.title + '活动', // 分享描述
								link: _self.current_url()+'/pages/memberCenter/formGatherManage/msgLogin/msgLogin?store_id=' + _self.$store.getters.getStoreId + '&customer_id=' + _self.customer_info.customer_id + '&actId=' + item.store_collect_info_id,
								imgUrl: item.cover_image, // 分享图标
								success: function (res) {
								  console.log(res,'success ---')
								},
								fail:function(err){
									console.log(err.errMsg,'fail ---')
								}
							}
							wx.updateAppMessageShareData(shareData);
							wx.updateTimelineShareData(shareData);
						})
						wx.error(function(res){
							console.log(res,'wx.error')
						})					
					}).catch( err => {
						
						console.log(err)
					})
					
				}).catch( err => {
					console.log(err)
				})
				
				
			},
			getCustomer(){
				const data = {
					token: this.$store.getters.getToken,
					store_id:this.store_id
				}
				this.$api.getCustomerInfo(data).then(res => {
					console.log(res,'角色')
					if(res.status){
						this.customer_info = res.data.userinfo
						this.role = res.data.role
						this.getActList()
					}
					let data = {
						token:this.$store.getters.getToken,
						customer_store_id:this.store_id
					}
					this.$api.gain_shop_msg(data).then(res=>{
						if(res.status){
							this.store_info = res.data
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			unpublishedClick(index,item){
				console.log(this.store_info)
				console.log(item)
				console.log("---unpublishedClick----")
				if(index == 0){
					if(this.store_info.customer_store_id==item.store_id&&this.customer_info.customer_id==this.store_info.customer_id){//店主
						uni.setStorageSync('editActDown',item)
						uni.navigateTo({
							url:'addForm/addFormDetails?page=edit&store_id=' + this.store_id+ '&store_collect_info_id=' + item.store_collect_info_id
						})
					}else if(this.role == 1){//员工
						uni.showToast({
							title:'您暂无修改此表单的权限',
							icon:'none',
							duration:2000
						})
						return false
					}else if(this.customer_info.customer_id==item.customer_id){//创建者
						uni.setStorageSync('editActDown',item)
						uni.navigateTo({
							url:'addForm/addFormDetails?page=edit&store_id=' + this.store_id+ '&store_collect_info_id=' + item.store_collect_info_id
						})
					}else if(this.role == 2){//队长
						let data = {
							token:this.$store.getters.getToken,
							activity_id:item.store_collect_info_id
						}
						this.$api.judge_down_act_add(data).then(res => {//创建者 判断重复可去掉
							if(!res.status){
								uni.showToast({
									title:'您暂无修改此表单的权限',
									icon:'none',
									duration:2000
								})
								return false
							}else{
								uni.setStorageSync('editActDown',item)
								uni.navigateTo({
									url:'addForm/addFormDetails?page=edit&store_id=' + this.store_id+ '&store_collect_info_id=' + item.store_collect_info_id
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				}else if(index == 1){
					if(this.store_info.customer_store_id==item.store_id&&this.customer_info.customer_id==this.store_info.customer_id){//店主
						uni.setStorageSync('inviteStaffActDown',item)
						uni.navigateTo({
							url:'inviteStaffManage/inviteStaffManage?page=form&use=inviteActDown&id=' + item.store_collect_info_id+"&store_id="+this.store_id
						})
					}else if(this.role == 1){
						uni.showToast({
							title:'您暂无修改此表单的权限',
							icon:'none',
							duration:2000
						})
						return false
					}else if(this.customer_info.customer_id==item.customer_id){
						uni.setStorageSync('inviteStaffActDown',item)
						uni.navigateTo({
							url:'inviteStaffManage/inviteStaffManage?page=form&use=inviteActDown&id=' + item.store_collect_info_id+"&store_id="+this.store_id
						})
					}else if(this.role == 2){
						let data = {
							token:this.$store.getters.getToken,
							activity_id:item.store_collect_info_id
						}
						this.$api.judge_down_act_add(data).then(res => {
							if(!res.status){
								uni.showToast({
									title:'您暂无修改此表单的权限',
									icon:'none',
									duration:2000
								})
								return false
							}else{
								uni.setStorageSync('inviteStaffActDown',item)
								uni.navigateTo({
									url:'inviteStaffManage/inviteStaffManage?page=form&use=inviteActDown&id=' + item.store_collect_info_id+"&store_id="+this.store_id
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				}
			},
			topNavCk(index) {
				this.topNavActiveIndex = index
				this.getActList()
			},
			addForm(){
				uni.navigateTo({
					url:'./addForm/addFormDetails?page=add&store_id=' + this.store_id
				})
			},
			
			// 各种操作
			operateClick(index,item){
				console.log(this.store_info)
				console.log(item)
				console.log("---operateClick----")
				if(index == 0){
					if(this.store_info.customer_store_id==item.store_id&&this.customer_info.customer_id==this.store_info.customer_id){
						uni.setStorageSync('editActDown',item)
						uni.navigateTo({
							url:'addForm/addFormDetails?page=edit&store_id=' + this.store_id + '&store_collect_info_id=' + item.store_collect_info_id
						})
					}else if(this.role == 1){
						uni.showToast({
							title:'您暂无修改此表单的权限0',
							icon:'none',
							duration:2000
						})
						return false
					}else if(this.customer_info.customer_id==item.customer_id){
						uni.setStorageSync('editActDown',item)
						uni.navigateTo({
							url:'addForm/addFormDetails?page=edit&store_id=' + this.store_id + '&store_collect_info_id=' + item.store_collect_info_id
						})
					}else if(this.role == 2){
						let data = {
							token:this.$store.getters.getToken,
							activity_id:item.store_collect_info_id
						}
						this.$api.judge_down_act_add(data).then(res => {
							if(!res.status){
								uni.showToast({
									title:'您暂无修改此表单的权限0',
									icon:'none',
									duration:2000
								})
								return false
							}else{
								uni.navigateTo({
									url:'addForm/addFormDetails?page=edit&store_id=' + this.store_id + '&store_collect_info_id=' + item.store_collect_info_id
								})	
							}
						}).catch(err => {
							console.log(err)
						})
					}
					
					console.log(item,'operateClick')
					// uni.setStorageSync('editActDown',item)
					
				}else if(index == 1){
					uni.setStorageSync('inviteStaffActDown',item)
					uni.navigateTo({
						url: 'inviteStaffManage/invite?id=' + item.store_collect_info_id+"&store_id="+this.store_id
					})
				}else if(index == 2){
					if(this.store_info.customer_store_id==item.store_id&&this.customer_info.customer_id==this.store_info.customer_id){
						let data = {
							token:this.$store.getters.getToken,
							store_collect_info_id:item.store_collect_info_id,
							// status:0
						}
						this.$api.edit_down_act_status(data).then(res => {
							console.log(res)
							if(res.status){
								this.getActList()
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none',
									duration:2000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}else if(this.role == 1){
						uni.showToast({
							title:'您暂无修改此表单的权限2',
							icon:'none',
							duration:2000
						})
						return false
					}else if(this.role == 2){
						let data = {
							token:this.$store.getters.getToken,
							activity_id:item.store_collect_info_id
						}
						this.$api.judge_down_act_add(data).then(res => {
							if(!res.status){
								uni.showToast({
									title:'您暂无修改此表单的权限2',
									icon:'none',
									duration:2000
								})
								return false
							}else{
								let data = {
									token:this.$store.getters.getToken,
									store_collect_info_id:item.store_collect_info_id,
									// status:0
								}
								this.$api.edit_down_act_status(data).then(res => {
									console.log(res)
									if(res.status){
										this.getActList()
									}else{
										uni.showToast({
											title:res.msg,
											icon:'none',
											duration:2000
										})
									}
								}).catch(err => {
									console.log(err)
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
					
				}
			},
			
			//订单详情
			checkMsg(item){
				console.log(item,'checkMsg')
				uni.setStorageSync('orderDetailsForm',item)
				uni.navigateTo({
					url:'inviteStaffManage/result?store_id=' + this.store_id+'&collect_info_id='+item.store_collect_info_id
				})
			},
			
			// 获取所有线下活动信息
			getActList(){
				switch(this.topNavActiveIndex){
					case 1:
						this.status = 1
						break;
					case 3:
						this.status = 2
						break;
					case 2:
						this.status = 0
						break;
					case 0:
						this.status = ''
						break;
				}
				let data = {
					page:1,
					pagesize:this.pageSize,
					status:this.status,
					store_id:this.store_id,
					customer_id:this.customer_info.customer_id
				}
				console.log(data,"获取列表数据");
				this.$api.gain_offline_act(data).then(res => {
					console.log(res)
					if(res.status){
						this.actList = res.list.data
						this.lastPage = res.list.last_page
						
						console.log(this.actList,"？？？？？？？？？？？？？？？？？？");
					}else{
						uni.showToast({
							title:res.msg,
							icon:"none",
							duration:2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 加载下一页
			LoadingMore(){
				this.page ++
				if(this.page <= this.lastPage){
					let data = {
						page:this.page,
						pagesize:this.pageSize,
						status:this.status
					}
					this.$api.gain_offline_act(data).then(res => {
						console.log(res)
						if(res.status){
							this.actList = this.actList.concat(res.list.data)
							console.log('第多少页',this.page,this.actList.length)
						}else{
							uni.showToast({
								title:res.msg,
								icon:"none",
								duration:2000
							})
						}
					}).catch(err => {
						console.log(err)
					})
				}else{
					uni.showToast({
						title:'没有更多啦！',
						icon:'none',
						duration:2000
					})
				}
			}
		}
	}
</script>

<style scoped>
	.popup_box_de{
		width: 100%;
		height: 100%;
	}
	.popup_box_close{
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;right: 10upx;
	}
	.no-form{
		color: #999999;
		font-size: 28upx;
		position: absolute;
		top: 50%;left: 50%;
		transform: translate(-50%,-50%);
	}
	page{
		background: #F3F3F4;
	}
	.form-gather-page{
		width: 100%;
		padding-bottom: 100upx;
		box-sizing: border-box;
	}
	.top_nav{
		width: 100%;
		height: 88upx;
		line-height: 88upx;
		background-color: #fff;
		margin-bottom: 10upx;
		box-sizing: border-box;
		color:#666666;
		display: flex;
		padding: 0upx 30upx;
		justify-content: space-between;
		font-size: 30upx;
		/* position: fixed;
		top: 0;left: 0;
		z-index: 999; */
	}
	.top_nav>view{
		width: 160upx;
		text-align: center;
	}
	.top_nav_active {
		color: #FF8B46;
		position: relative;
	}
	.top_nav_active::after {
		position: absolute;
		content: '';
		width: 72upx;
		height: 6upx;
		background-color: #FF8B46;
		border-radius: 3upx;
		bottom: 0upx;
		left: 50%;
		transform: translate(-50%,0);
	}
	.act-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		background: #FFFFFF;
	}
	.act-content-detail{
		width: 100%;
		height: 388upx;
		position: relative;
	}
	.act-content-detail>image{
		width: 100%;
		height: 100%;
	}
	.group-join{
		width: 138upx;
		height: 60upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
		background: url(https://tool.tuanhaoke.cn/static/image/home/home_image_back.png) no-repeat;
		background-size: 100% 100%;
		font-size: 28upx;
		position: absolute;
		top: -4upx;left: -16upx;
	}
	.act-content-group{
		width: 140upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		background: url(https://tool.tuanhaoke.cn/static/image/home/home_image_back.png) no-repeat;
		position: absolute;
		background-size: 100% 100%;
		top: -4upx;left: -16upx;
	}
	.underway{
		width: 124upx;
		height: 48upx;
		line-height: 48upx;
		border-radius: 84upx 0 0 84upx;
		background: #68CB00;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		position: absolute;
		top: 0;right: 0;
	}
	.unbegin{
		width: 124upx;
		height: 48upx;
		line-height: 48upx;
		border-radius: 84upx 0 0 84upx;
		background: #FF391F;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		position: absolute;
		top: 0;right: 0;
	}
	.act-title-content{
		width: 100%;
		padding: 20upx 0;
		box-sizing: border-box;
		position: relative;
		border-bottom: 1upx solid #DEDEDE;
	}
	.act-title-detail{
		display: flex;
	}
	.act-title-detail>text:nth-child(1){
		color: #999999;
		font-size: 24upx;
		line-height: 40upx;
	}
	.act-name{
		color:#000000;
		font-size: 24upx;
		line-height: 40upx;
	}
	.act-title-detail>image{
		width: 40upx;
		height: 40upx;
		margin: 0 10upx;
		border-radius: 50%;
	}
	.share-patriarch{
		width: 160upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		box-shadow: 0 4upx 12upx 0 rgba(255, 95, 63, 0.47);
		border-radius: 30upx;
		position: absolute;
		bottom: 20upx;right: 0;
	}
	.act-operate{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.act-operate>view{
		width: 30%;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
		font-size: 24upx;
		color: #666666;
		background: #F3F3F4;
		border-radius: 30upx;
		margin-top: 30upx;
	}
	.act-title-details{
		color: #333333;
		font-size: 34upx;
		margin-top: 20upx;
	}
	.order-detail{
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		background: #F3F3F4;
		border-radius: 30upx;
		margin-top: 30upx;
	}
	.unpublished{
		background: #FF391F;
		width: 124upx;
		height: 48upx;
		line-height: 48upx;
		border-radius: 84upx 0 0 84upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		position: absolute;
		top: 0;right: 0;
	}
	.finished{
		color: #999999;
		background: #F3F3F4;
		width: 124upx;
		height: 48upx;
		line-height: 48upx;
		border-radius: 84upx 0 0 84upx;
		text-align: center;
		font-size: 28upx;
		position: absolute;
		top: 0;right: 0;
	}
	.add-form{
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;left: 0;
	}
	.add-form>view{
		width: 638upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 28upx;
		margin: 0 auto;
		margin-top: 10upx;
		background: linear-gradient(to right,#FE9543,#FF664F);
		border-radius: 44upx ;
		box-shadow: 0 4upx 12upx 0 #8CFAB030;
	}
</style>
